<template>
  <div class="content">
    <h1 class="title">
      <slot name="title"></slot>
    </h1>
    <hr />
    <ul>
      <li class="list-title">
        <div class="song-item">
          <span class="item-index"></span>
          <span class="item-title">歌曲名</span>
          <span class="item-name">艺人</span>
          <span class="item-intro">专辑</span>
        </div>
      </li>
      <li class="list-content" v-for="(item, index) in songList" :key="index">
        <div class="song-item" :class="{ 'is-play': id === item.id }">
        <!-- toplay(item.id, item.url, item.pic, index, item.name, item.lyric) -->
          <span
            class="item-index"
            @click="checkPlay(index,item)"
          >
            <span v-if="id !== item.id">{{ index + 1 }}</span>
            <svg v-if="id === item.id" class="icon" aria-hidden="true">
              <use xlink:href="#icon-yinliang"></use>
            </svg>
          </span>
          <span class="item-title">
          <!-- toplay(
                  item.id,
                  item.url,
                  item.pic,
                  index,
                  item.name,
                  item.lyric
                ) -->
            <span
              @click="checkPlay(index,item)"
              >{{ replaceFName(item.name) }}</span
            >
            <el-tooltip  v-if="item.mvUrl" class="item" effect="dark" content="点击观看" placement="top-start">
              <span @click="playMV(item)">
              <i class="el-icon-video-camera"></i>
            </span>
            </el-tooltip>
            <el-tooltip v-if="item.money>0" class="item" effect="dark" content="点击付费" placement="top-start">
              <span class="pay" @click="checkPlay(index,item)">付费</span>
            </el-tooltip>
            
          </span>
          <span class="item-name">{{ replaceLName(item.name) }}</span>
          <span class="item-intro">{{ item.introduction }}</span>
        </div>
      </li>
    </ul>
    <el-dialog
      title="音乐MV"
      :visible.sync="videoVsb"
      width="700px"
      center
      :before-close="videoClose"
    >
      <Video ref="video" :url="this.curMVUrl"></Video>
    </el-dialog>
    <el-dialog title="音乐付费" :visible.sync="payVsb"  width="250px" center >
    <img src="../../static/img/pay.png" style="width:200px;height:190px;"/>
    <span slot="footer" class="dialog-footer">
    <el-button @click="handleClosePay" size="small">取消</el-button>
    <el-button type="primary" @click="handlePay" size="small">已付费</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { mixin } from "../mixins";
import { mapGetters } from "vuex";
import Video from "./Video";

export default {
  name: "album-content",
  mixins: [mixin],
  props: ["songList"],
  components: { Video },
  computed: {
    ...mapGetters([
      'userId', // 用户ID
      'loginIn', // 用户是否已经登录
      "id" // 音乐ID
    ])
  },
  data() {
    return {
      videoVsb: false,
      payVsb:false,
      curMVUrl: null,
      curSong:null,
    };
  },
  methods: {
    // [直接点击操作]检查用户是否能进行播放
     async checkPlay(index,song){
       this.curSong = song
       console.log(this.userId);
      if (this.loginIn) { // 如果用户已经登录
        const flag = await this.checkPay(this.userId,song) // 判断用户是否已经付费
        if (flag==true) { // 如果可播放
          this.toplay(song.id, song.url, song.pic, index, song.name, song.lyric)
        }else{
          console.log('XXXXXXXXX付费歌曲XXXXXX');
          this.payVsb = true
        }
      }else{ // 如果没有登录
        if (song.money&&song.money>0) { // 如果要求付费
                  this.$notify({
            title: '付费歌曲：登录并付费后可享受！',
            type: 'warning'
          })
        }else{ // 如果免费
          this.toplay(song.id, song.url, song.pic, index, song.name, song.lyric)
        }
      }
    },
    async handlePay(){
      console.log('执行付费操作');
      const params = {userId:this.userId,songId:this.curSong.id,payMoney:this.curSong.money}
      const response = await axios.post(`${this.$store.state.HOST}/pay/addPay`, params)
      if (response.data.code==1) {
        this.payVsb = false
          this.$notify({
          title: response.data.msg,
          type: 'success'
        })
      }else{
        this.$notify({
          title: '付费失败！',
          type: 'warnng'
        })
      }
    },
    handleClosePay(){
      console.log('取消付费');
      this.payVsb = false
    },
    playMV(item) {
      this.curMVUrl = `${this.$store.state.HOST}` + item.mvUrl;
      this.videoVsb = true;
    },
    videoClose(done) {
      this.$refs.video.stop();
      done();
    }
  }
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.pay{
font-size: 12px;
    background-color: #C20C0C;
    padding: 0 5px 2px 5px;
        margin-left: 10px;
    color: white;
    border-radius: 5px;
}
.content {
  background-color: white;
  border-radius: 12px;
  padding: 20px 40px;
  min-width: 700px;
}
.content .title {
  text-align: center;
}
.content > ul {
  width: 100%;
  padding-bottom: 50px;
}
.content > ul > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: block;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
}
.list-content {
  cursor: pointer;
}
.song-item {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-index {
  width: 5%;
}
.item-title {
  width: 30%;
}
.item-name {
  width: 20%;
}
.item-intro {
  width: 45%;
}
.is-play {
  color: #30a4fc;
  font-weight: bold;
}
.icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.3em;
  position: relative;
  right: 5px;
  fill: currentColor;
  overflow: hidden;
}
</style>
